<template>
	<view class="comment-detail">
		<iheader :title="comment.book_name"></iheader>
		<uni-card :title="comment.nickname" mode="title" :thumbnail="comment.avatar" :extra="comment.created_at"
			note="true">
			{{comment.content}}
			<template v-slot:footer>
				<uni-rate allow-half :size="16" :max="5" :value="comment.score" />
			</template>
		</uni-card>
		<view class="fix-bottom">
			<form>
				<input type="text" :placeholder="'回复:'+comment.nickname" />
				<image  src='/static/images/send.png'></image>
			</form>
		</view>
	</view>
</template>

<script>
	import config from '../../config.js'
	import util from '../../utils/util.js'
	import api from '../../utils/api.js'

	import iheader from '../../components/header.vue'

	export default {
		components: {
			iheader
		},
		data() {
			return {
				comment: {}
			}
		},
		onLoad(options) {
			if (config.debug) console.log(options)
			if (options.comment && options.comment != undefined && options.comment != '') {
				this.comment = JSON.parse(decodeURIComponent(options.comment))
			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	.fix-bottom {
		z-index: 1000;
		position: fixed;
		bottom: 10px;
		width: 90%;
		left: 0;
		right: 0;
		margin: auto;
	}

	form {
		position: relative;
		display: block;
		background-color: #f8f8f8;
		border-radius: 5px;
		padding-right: 70px;
		padding-top: 8px;
		padding-left: 15px;
		padding-bottom: 8px;
		height: 40px;
		box-sizing: border-box;
		border-radius: 25px;
	}
	
	form input {
		height: 24px;
		line-height: 24px;
		font-size: 15px;
		min-height: 24px;
	}
	
	
	form image {
		margin: 0;
		position: absolute;
		top: 0;
		right: 0;
		box-sizing: border-box;
		height: 40px;
		width: 40px;
		padding: 8px 8px;
		z-index: 99;
	}
	
	form image.clear {
		right: 35px;
		z-index: 88;
	}
	
	@media (min-width: 768px) {
		form {
			height: 50px;
			border-radius: 5px;
			padding-right: 70px;
			padding-top: 10px;
			padding-bottom: 10px;
			padding-left: 15px;
			box-sizing: border-box;
		}
	
		form input {
			font-size: 17px;
			height: 30px;
			line-height: 30px;
			min-height: 30px;
		}
	
	
		form image {
			height: 50px;
			width: 50px;
			padding: 10px 10px;
		}
	
		form image.clear {
			right: 35px;
		}
	}
</style>
